<template>
	<view class="gradient-container">
		<view class="status_bar"></view>
		<view class="pagetitle">
			<uni-icons type="back" style="position:absolute; left: 10pt;bottom: 10pt;" size="16pt" @click="back_my"></uni-icons>
			<view class="center" style="height: 44pt;width: 120pt;">
				<text style="margin: 12pt 0pt;font-size: 16pt;">商家收益</text>
			</view>
		</view>
		
		<view style="margin:  12pt 0pt;display: flex;justify-content: center;align-items: center;width: 100%;">
			<uni-search-bar
			placeholder="请搜索商家"
			radius="16"
			style="width: 100%;height: 32pt;"
			cancelButton="none"
			bgColor="#fff"
			></uni-search-bar>
		</view>
		
		<view class="list" style="width: 100%;">
			
			<view style="display:flex;justify-content: center;flex-direction: row;margin-bottom: 16pt;color: rgba(0, 0, 0, 0.40);align-items: center;">
				<view style="">
					<view :class="['text_padding',{blue:show_modle===0}]" @click="showpage(0)"><text class="text">日收益</text></view>
				</view>
				<view>
					<view :class="['text_padding',{blue:show_modle===1}]" @click="showpage(1)"><text class="text">月收益</text></view>
				</view>
				<view>
					<view :class="['text_padding',{blue:show_modle===2}]" @click="showpage(2)"><text class="text">年收益</text></view>
				</view>
			</view>
			
			
			<view style="width: 100%;height: 56pt;margin: 8pt 0pt;" v-for="(item,index) in shoplist" v-if="show_modle===0">
				<view style="width: 100%;height: 38pt;margin:9pt 0pt;flex-direction: row;display: flex;" @click="someone(item.name)">
					
					<view style="width: 56%;height: 38pt;flex-direction: row;display: flex;">
						<image
						  :src="item.avatar"
						  style="background-color: bisque; border-radius: 50%; height: 32pt; width: 32pt; margin-bottom: 8pt;"
						></image>
						<view style="flex-direction: column;display: flex;">
						<text style="font-size:14pt ;color:rgba(0, 0, 0, 0.80);">{{item.name}}</text>
						<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">交易额 &emsp;{{item.turnover}}</text></view>
					</view>

					<view style="width: 45%;height: 38pt;display: flex;justify-content: center;align-items: center;">
						<view style="flex-direction: column;display: flex;align-items: flex-end;">
						<text style="font-size:14pt ;
						color:rgba(0, 0, 0, 0.80);
						font-weight: bold;line-height: 22pt;">{{item.turnover}}</text>
						<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">日收益</text></view>
					</view>
				</view>
			</view>
			
			<view style="width: 100%;height: 56pt;margin: 8pt 0pt;" v-for="(item,index) in shoplist" v-if="show_modle===1">
				<view style="width: 100%;height: 38pt;margin:9pt 0pt;flex-direction: row;display: flex;" @click="someone(item.name)">
					
					<view style="width: 56%;height: 38pt;flex-direction: row;display: flex;">
						<image
						  :src="item.avatar"
						  style="background-color: bisque; border-radius: 50%; height: 32pt; width: 32pt; margin-bottom: 8pt;"
						></image>
						<view style="flex-direction: column;display: flex;">
						<text style="font-size:14pt ;color:rgba(0, 0, 0, 0.80);">{{item.name}}</text>
						<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">交易额 &emsp;{{item.turnover}}</text></view>
					</view>
			
					<view style="width: 45%;height: 38pt;display: flex;justify-content: center;align-items: center;">
						<view style="flex-direction: column;display: flex;align-items: flex-end;">
						<text style="font-size:14pt ;
						color:rgba(0, 0, 0, 0.80);
						font-weight: bold;line-height: 22pt;">{{item.turnover}}</text>
						<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">月收益</text></view>
					</view>
				</view>
			</view>
			
			<view style="width: 100%;height: 56pt;margin: 8pt 0pt;" v-for="(item,index) in shoplist" v-if="show_modle===2">
				<view style="width: 100%;height: 38pt;margin:9pt 0pt;flex-direction: row;display: flex;" @click="someone(item.name)">
					
					<view style="width: 56%;height: 38pt;flex-direction: row;display: flex;">
						<image
						  :src="item.avatar"
						  style="background-color: bisque; border-radius: 50%; height: 32pt; width: 32pt; margin-bottom: 8pt;"
						></image>
						<view style="flex-direction: column;display: flex;">
						<text style="font-size:14pt ;color:rgba(0, 0, 0, 0.80);">{{item.name}}</text>
						<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">交易额 &emsp;{{item.turnover}}</text></view>
					</view>
			
					<view style="width: 45%;height: 38pt;display: flex;justify-content: center;align-items: center;">
						<view style="flex-direction: column;display: flex;align-items: flex-end;">
						<text style="font-size:14pt ;
						color:rgba(0, 0, 0, 0.80);
						font-weight: bold;line-height: 22pt;">{{item.turnover}}</text>
						<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">年收益</text></view>
					</view>
				</view>
			</view>
		</view>
		</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	const back_my=()=>{
			uni.switchTab({
				url:'/pages/guanliyuan/my',
			});
		};
	const show_modle=ref(0);
	const showpage=(index)=>{
		show_modle.value=index;
	};
	const someone=(index)=>{
		uni.redirectTo({
			 url: `/pages/guanliyuan/shopone?name=${index}`
		});
	};
	
// 模拟数据
let shoplist = ref([
  {
    id: 1,
    name: '阳光便利店',
    avatar: '/static/shop1.jpg',
    turnover: 125800.50,
    income: 12580.05
  },
  {
    id: 2,
    name: '天天超市',
    avatar: '/static/shop2.jpg',
    turnover: 98750.00,
    income: 9875.00
  },
  {
    id: 3,
    name: '快乐水果店',
    avatar: '/static/shop3.jpg',
    turnover: 75620.30,
    income: 7562.03
  },
  {
    id: 4,
    name: '美味面包房',
    avatar: '/static/shop4.jpg',
    turnover: 68240.75,
    income: 6824.08
  },
  {
    id: 5,
    name: '时尚服装店',
    avatar: '/static/shop5.jpg',
    turnover: 153200.00,
    income: 15320.00
  }
])

</script>

<style>
	.center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pagetitle{
		position: relative;
		display: flex;
		width: 100%;
		height: 44pt;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.list{
		background-color: #ffffff;
		border-radius: 10pt;
		box-shadow: 2pt 2pt 4pt #e1e1e1;
		margin: 8pt 0pt;
	}
	.blue{
		color:rgba(0, 122, 255, 1) ;
		background: linear-gradient(rgba(0, 122, 255, 1),rgba(0, 122, 255, 1)) no-repeat;
		background-size: 60pt 2pt;
		background-position: 10pt bottom;
	}
.text{
	height: 22pt;
	width: 42pt;
	font-size: 14pt;
	line-height: 22pt;

}
.text_padding{
	margin:8pt 17pt 6pt 18pt ;
	padding:8pt 16pt 6pt ;
	white-space: nowrap;
}
</style>